<!--  -->
<script setup>
import UsrProfile from '@/components/UsrProfile.vue'
import { useBreadsStore } from '@/stores'
import { onMounted, ref } from 'vue'
import { getUserRankListAPI, getStaffListAPI } from '@/apis/user'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([{ title: '用户列表' }])
const userRankList = ref([])
const staffList = ref([])
onMounted(() => {
  getUserRankListAPI().then(res => {
    userRankList.value = res.data
  })
  getStaffListAPI().then(res => {
    staffList.value = res.data
  })
})
</script>

<template>
  <div class="view-container">
    <div class="header">
      <div class="title">用户</div>
    </div>
    <div class="section">
      <div class="section-title">声望排名</div>
      <div class="section-content">
        <UsrProfile v-for="v in userRankList" :key="v.id" :data="v" :info="v.ranks + ' 声望'" />
      </div>
    </div>
    <div class="section">
      <div class="section-title">工作人员</div>
      <div class="section-content">
        <UsrProfile v-for="v in staffList" :key="v.id" :data="v" :info="v.ranks + ' 声望'" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-container {
  min-height: 100%;
  margin-right: 4em;
}

.header {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px dashed var(--border-secondary);
}

.section {

  margin-bottom: 2em;

  .section-title {
    font-size: 1.2em;
    margin-bottom: .5em;
  }

  .section-content {
    font-size: .9em;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
